		<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>Welcome to Design Zone......</title>
		<link rel="stylesheet" type="text/css"
			href="../../scripts/ext/resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css"
			href="../../scripts/ext/resources/css/file-upload.css" />
		<link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
		<script type="text/javascript"
			src="../../scripts/ext/adapter/ext-base.js">
		        </script>
		<script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
		<script type="text/javascript" src="../../scripts/menu/EditableItem.js">
		        </script>
		<script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
		        </script>
		<script type="text/javascript" src="../../scripts/grid/GridFilters.js">
		        </script>
		<script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
		        </script>
		<script type="text/javascript"
			src="../../scripts/grid/filter/StringFilter.js">
        </script>
		<script type="text/javascript"
			src="../../scripts/grid/filter/ListFilter.js">
        </script>
		<script type="text/javascript"
			src="../../scripts/grid/filter/DateFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
		<script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
		<script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
		<script type="text/javascript" src="../../scripts/utils.js">
        </script>
		<script type="text/javascript"
			src="../../scripts/selectMeasureSpecification.js">
        </script>
		<script type="text/javascript"
			src="../../scripts/multiSelectProductIdentification.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectBiFactory.js">
        </script>
		<script type="text/javascript"
			src="../../scripts/selectBiFranceCustomer.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectBiArmor.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectDzColor.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectYarn.js">
        </script>
        <script type="text/javascript" src="../../scripts/imageViewer.js"></script>
		<script type="text/javascript">
			var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.dzcolor');
            var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
			var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var pDzColorForm;
			var pDzColorListStore;
            var pDzColorListGrid;
            
			var idValue = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
            var input = getPrarmeterValue(window.location, 'input');
            var piXMLReader = new Ext.data.XmlReader({
                   record: 'item'
               }, [{
                   name: 'id',
                   mapping: 'id'
               }, {
                   name: 'ctProductFamily',
                   mapping: 'ctProductFamily'
               }, {
                   name: 'ctMachineType',
                   mapping: 'ctMachineType'
               }, {
                   name: 'type',
                   mapping: 'type'
               }, {
                   name: 'orderNumber',
                   mapping: 'orderNumber'
               }, {
                   name: 'yarnNumber',
                   mapping: 'yarnNumber'
               }, {
                   name: 'ctDesignType',
                   mapping: 'ctDesignType'
               }, {
                   name: 'style',
                   mapping: 'style'
               }, {
                   name: 'customerLinkman',
                   mapping: 'customerLinkman'
               }, {
                   name: 'model',
                   mapping: 'model'
               }, {
                   name: 'ctSeasonNumber',
                   mapping: 'ctSeasonNumber'
               }, {
                   name: 'ctSeasonNumberCode',
                   mapping: 'ctSeasonNumberCode'
               }, {
                   name: 'reference',
                   mapping: 'reference'
               }, {
                   name: 'createDate',
                   mapping: 'createDate'
               }, {
                   name: 'ctVersion',
                   mapping: 'ctVersion'
               }, {
                   name: 'patronageNumer',
                   mapping: 'patronageNumer'
               }, {
                   name: 'front',
                   mapping: 'front'
               }, {
                   name: 'back',
                   mapping: 'back'
               }, {
                   name: 'sleeves',
                   mapping: 'sleeves'
               }, {
                   name: 'bottomThrum',
                   mapping: 'bottomThrum'
               }, {
                   name: 'sleevesThrum',
                   mapping: 'sleevesThrum'
               }, {
                   name: 'necklineThrum',
                   mapping: 'necklineThrum'
               }, {
                   name: 'needle',
                   mapping: 'needle'
               }, {
                   name: 'weight',
                   mapping: 'weight'
               }, {
                   name: 'comment',
                   mapping: 'comment'
               }, {
                   name: 'customerID',
                   mapping: 'customerID'
               }, {
                   name: 'photoName',
                   mapping: 'photoName'
               }, {
                   name: 'chartName',
                   mapping: 'chartName'
               }, {
                   name: 'biMeasureSpecificationId',
                   mapping: 'biMeasureSpecificationId'
               }, {
                   name: 'biMeasureSpecificationName',
                   mapping: 'biMeasureSpecificationName'
               }, {
                   name: 'yarnName',
                   mapping: 'yarnName'
               }, {
                   name: 'frontPhotoName',
                   mapping: 'frontPhotoName'
               }, {
                   name: 'backPhotoName',
                   mapping: 'backPhotoName'
               }, {
                   name: 'photoName',
                   mapping: 'photoName'
               }, {
                   name: 'chartName',
                   mapping: 'chartName'
               }, {
                   name: 'ctCollarType',
                   mapping: 'ctCollarType'
               },{
               	   name: 'ctProductIdentificationStyle',
               	   mapping: 'ctProductIdentificationStyle'
               },{
                   name: 'customerName',
                   mapping: 'customerName'
               }, {
                   name: 'customerDepartment',
                   mapping: 'customerDepartment'
               }, {
                   name: 'referenceAs',
                   mapping: 'referenceAs'
               }, {
                   name: 'createDate',
                   mapping: 'createDate'
               },{
               	   name: 'sketch1Name',
               	   mapping: 'sketch1Name'
               },{
               	   name: 'sketch2Name',
               	   mapping: 'sketch2Name'
               },{
               	   name: 'sketch3Name',
               	   mapping: 'sketch3Name'
               }]);
                
              var piXmlLoader = new xmlLoader('../../servlet/ProductIdentificationServlet?action=11&id=' + idValue);
              
              var piRecord = piXMLReader.readRecords(piXmlLoader.getXml()).records[0];
              
              var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
								 '<tr><td style="background:#eeeeee; width: 15%;">',
								 fcMessage.get('ui.francecustomer.name'), 
								 '</td><td>{customerName}</td>', 
								 '<td style="background:#eeeeee;width: 15%;">', 
								 fcMessage.get('ui.francecustomer.department'), 
								 '</td><td>{customerDepartment}</td><td style="background:#eeeeee;">', 
								 piMessage.get('ui.productidentification.seasonnumber'), 
								 '</td><td>{ctSeasonNumber}</td>', '<td style="background:#eeeeee;">', 
								 message.get('message.edit.createdate') + '(d/m/Y)', 
								 '</td><td>{createDate}</td></tr>', 
								 
								 
								 '<tr><td style="background:#eeeeee;">', 
								referenceMessage.get('ui.reference.reference'),
								 '</td><td>{reference}</td><td style="background:#eeeeee;">', 
								piMessage.get('ui.productidentification.style'), 
								 '</td><td>{ctCollarType}&nbsp;&nbsp;{ctProductIdentificationStyle}</td><td style="background:#eeeeee;">', 
								 piMessage.get('ui.productidentification.chartversion'), 
								 '</td><td>{ctVersion}</td><td style="background:#eeeeee;">', 
								piMessage.get('ui.productidentification.designtype'), 
								 '</td><td>{ctDesignType}</td></tr>',
								 
								 '<tr><td colspan="8">',
								 //'<img width="120" src="../../_temp/{frontPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
								 //'<img width="120" src="../../_temp/{backPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
								 '<img width="120" src="../../_temp/{sketch1Name}" onclick="openImageViewer(this.src);"/>&nbsp;&nbsp;&nbsp;&nbsp;',
								 '<img width="120" src="../../_temp/{sketch2Name}" onclick="openImageViewer(this.src);"/>&nbsp;&nbsp;&nbsp;&nbsp;',
								 '<img width="120" src="../../_temp/{sketch3Name}" onclick="openImageViewer(this.src);"/>',
								 '</td></tr>',
								 '</tbody></table>'];
              var itemTpl = new Ext.Template(itemTplMarkup);
              
              var dzColorTipImg;
              var selectDZColorCallback = function(dzColorId, dzColorCode, customerName, customerDepartment, yarnReference, ctYarnMeasure, yarnAccount,
						supplierNumber, customerColorCode, pantoneNumber, realColor,
						ctYarnMaterial1, ctYarnMaterial2, ctYarnMaterial3, ctYarnMaterial4, ctYarnMaterial5, factoryName, photo1Name, photo2Name,photo3Name,isApproved){
					if(isApproved == '02'){
						messageTip.msg(message.get('message.tip'), orderMessage.get('ui.order.colornotapproved'));
						return;
					}
					Ext.getCmp('dzColorId').setValue(dzColorId);
					Ext.getCmp('dzColorCode').setValue(dzColorCode);
					//Ext.getCmp('customerName').setValue(customerName);
					//Ext.getCmp('customerDepartment').setValue(customerDepartment);
					
					//Ext.getCmp('supplierNumber').setValue(supplierNumber);
					Ext.getCmp('customerColorCode').setValue(customerColorCode);
					dzColorTipImg = photo3Name;
					//Ext.getCmp('pantoneNumber').setValue(pantoneNumber);
					//if(realColor && realColor != '')
					//	document.getElementById('sampleTable').style['backgroundColor'] = '#' + realColor;
					//else
					//	document.getElementById('sampleTable').style['backgroundColor'] = '#DFE8F6';
					//Ext.getCmp('factoryName').setValue(factoryName);
				}
				
			  var setActualWeight = function(){
			  		var weight = Ext.get('weight').getValue();
                    var loss = Ext.getCmp('loss').getValue();
                    var percentage = Ext.getCmp('percentage').getValue();
                    if(!loss || !percentage) return ;
                    var actualWeight = weight*(1+loss/100) * percentage/100;
                    Ext.getCmp('actualWeight').setValue(actualWeight);
			  }
			  
			  var render2D = function(v, p, record){
					if(v == 0){
						return '';
					}
				    v = (Math.round((v - 0) * 100)) / 100;
				    v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
				    v = String(v);
				    var ps = v.split(".");
				    var whole = ps[0];
				    var sub = ps[1] ? "." + ps[1] : ".00";
				    var r = /(\d+)(\d{3})/;
				    while (r.test(whole)) {
				        whole = whole.replace(r, "$1" + "," + "$2")
				    }
				    v = whole + sub;
				    //if (v.charAt(0) == "-") {
				    //   return v.substr(1)
				    //}
				    if(record.id == -1 && v != 100){
				    	return '<font color="red"><b>' + v + '</b></font>'
				    }
				    return v;
				}
				
				var editCallback = function(){
					pDzColorForm.getForm().load({
						url:'../../servlet/ProductDZColorServlet?action=3&id=' + editId, 
						waitMsg:Ext.LoadMask.prototype.msg, 
						success: function(form, action){
							dzColorTipImg = Ext.getCmp('photo3NameApp').getValue();
						},
						failure: function(o){
							messageTip.msg(message.get('message.tip'), message.get('message.load.unsuccessful'));
						}
					});
				}
				
				var deleteCallback = function(btn){
	                if (btn == 'yes') {
	                    Ext.Ajax.request({
	                        url: '../../servlet/ProductDZColorServlet?action=2&id=' + deleteId,
	                        success: function(o){
	                            if (o.responseText == 'success') {
	                                pDzColorListStore.reload();
	                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
	                            }
	                            else {
	                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
	                            }
	                        },
	                        failure: function(o){
	                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
	                        },
	                        params: {
	                            foo: 'bar'
	                        }
	                    });
	                }
	            }
	            
	            var selectYarnId;
	            var selectYarnCallback = function(yarnId, yarnReference, factoryName, ctYarnMaterial1, ctYarnMaterial2, ctYarnMaterial3, ctYarnMaterial4, ctYarnMaterial5,ctYarnMeasure,yarnAccount){
					//alert(yarnId + ' ' + factoryName + ' ' +yarnReference+ ' ' +ctYarnMaterial1+ ' ' +ctYarnMaterial2+ ' ' +ctYarnMaterial3+ ' ' +ctYarnMaterial4+ ' ' +ctYarnMaterial5);
					selectYarnId = yarnId;
					document.getElementById('yarnReference').value = yarnReference;
					document.getElementById('factoryName').value = factoryName;
					document.getElementById('ctYarnMaterial1').value = ctYarnMaterial1;
					document.getElementById('ctYarnMaterial2').value = ctYarnMaterial2;
					document.getElementById('ctYarnMaterial3').value = ctYarnMaterial3;
					document.getElementById('ctYarnMaterial4').value = ctYarnMaterial4;
					document.getElementById('ctYarnMaterial5').value = ctYarnMaterial5;
					Ext.getCmp('yarnAccount').setValue(ctYarnMeasure + ' ' + yarnAccount);
				}
			
              Ext.onReady(function(){
				itemTpl.append('productIdentification', piRecord.data);
				
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';

				pDzColorForm = new Ext.FormPanel({
			        labelAlign: 'left',
					url: '../../servlet/ProductDZColorServlet?action=1',
			        frame:true,
			        title: dzColorMessage.get('ui.dzcolor.editpidzcolor'),
			        bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width: '100%',
					labelWidth: 125,
					reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    },{
                    	name: 'sequence',
                    	mapping: 'sequence'
                    },{
                    	name: 'variant',
                    	mapping: 'variant'
                    },{
                        name: 'dzColorId',
                        mapping: 'dzColorId'
                    },{
                        name: 'dzColorCode',
                        mapping: 'dzColorCode'
                    },{
                        name: 'yarnReference',
                        mapping: 'yarnReference'
                    },{
                        name: 'ctYarnMeasure',
                        mapping: 'ctYarnMeasure'
                    },{
                        name: 'yarnAccount',
                        mapping: 'yarnAccount'
                    },{
                        name: 'ctYarnMaterial1',
                        mapping: 'ctYarnMaterial1'
                    },{
                        name: 'ctYarnMaterial2',
                        mapping: 'ctYarnMaterial2'
                    },{
                        name: 'ctYarnMaterial3',
                        mapping: 'ctYarnMaterial3'
                    },{
                        name: 'ctYarnMaterial4',
                        mapping: 'ctYarnMaterial41'
                    },{
                        name: 'ctYarnMaterial5',
                        mapping: 'ctYarnMaterial5'
                    },{
                        name: 'customerColorCode',
                        mapping: 'customerColorCode'
                    },{
                        name: 'percentage',
                        mapping: 'percentage'
                    },{
                        name: 'loss',
                        mapping: 'loss'
                    },{
                        name: 'actualWeight',
                        mapping: 'actualWeight'
                    },{
                        name: 'factoryName',
                        mapping: 'factoryName'
                    },{
						name: 'photo3Name',
						mapping: 'photo3Name'
                    }]),
					collapsible: true,
			        items: [{
	                        id: 'productIdentificationId',
	                        name: 'productIdentificationId',
	                        xtype: 'hidden',
							value: piRecord.data.id
                    	},{
	                        id: 'id',
	                        name: 'id',
	                        xtype: 'hidden'
                    	},{
	                        id: 'dzColorId',
	                        name: 'dzColorId',
	                        xtype: 'hidden'
                    	},{
	                        id: 'photo3NameApp',
	                        name: 'photo3Name',
	                        xtype: 'hidden'
                    	},{
							xtype: 'fieldset',
							collapsible: true,
							title: yarnMessage.get('ui.yarn.composition'),
							autoHeight: true,
							items: [{
	                            layout: 'column',
	                            items: [{
	                                columnWidth: .33,
	                                layout: 'form',
	                                items: [{
		                                id: 'yarnReference',
		                                name: 'yarnReference',
		                                xtype: 'textfield',
		                                fieldLabel: yarnMessage.get('ui.yarn.reference'),
		                                anchor: '86%',
										width: '90%',
		                                allowBlank: false,
		                                blankText: message.get('message.edit.noblank'),
										emptyText: message.get('message.combo.pleaseselect'),
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true,
		                                listeners: {
		                                    'render': {
		                                        fn: function(){
		                                            Ext.getCmp('yarnReference').getEl().on('click', function(){
		                                                selectYarn();
		                                            }, this);
		                                        },
		                                        scope: this
		                                    }
		                                }
		                            },{
		                                id: 'ctYarnMaterial1',
		                                name: 'ctYarnMaterial1',
		                                xtype: 'textfield',
		                                fieldLabel: yarnMessage.get('ui.yarn.material') + '1',
		                                anchor: '86%',
										width: '90%',
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true
		                            },{
		                                id: 'ctYarnMaterial4',
		                                name: 'ctYarnMaterial4',
		                                xtype: 'textfield',
		                                fieldLabel: yarnMessage.get('ui.yarn.material') + '4',
		                                anchor: '86%',
										width: '90%',
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true
		                            }]
								
								},{
	                                columnWidth: .33,
	                                layout: 'form',
	                                items: [{
		                                id: 'factoryName',
		                                name: 'factoryName',
		                                xtype: 'textfield',
		                                fieldLabel: fMessage.get('ui.factory.name'),
		                                anchor: '86%',
										width: '90%',
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true
		                            },{
		                                id: 'ctYarnMaterial2',
		                                name: 'ctYarnMaterial2',
		                                xtype: 'textfield',
		                                fieldLabel: yarnMessage.get('ui.yarn.material') + '2',
		                                anchor: '86%',
										width: '90%',
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true
		                            },{
		                                id: 'ctYarnMaterial5',
		                                name: 'ctYarnMaterial5',
		                                xtype: 'textfield',
		                                fieldLabel: yarnMessage.get('ui.yarn.material') + '5',
		                                anchor: '86%',
										width: '90%',
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true
		                            }]
								},{
	                                columnWidth: .33,
	                                layout: 'form',
	                                items: [{
		                                id: 'yarnAccount',
		                                name: 'yarnAccount',
		                                xtype: 'textfield',
		                                fieldLabel: yarnMessage.get('ui.yarn.yarnaccount'),
		                                anchor: '86%',
										width: '90%',
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true
		                            },{
		                                id: 'ctYarnMaterial3',
		                                name: 'ctYarnMaterial3',
		                                xtype: 'textfield',
		                                fieldLabel: yarnMessage.get('ui.yarn.material') + '3',
		                                anchor: '86%',
										width: '90%',
		                                maxLength: 64,
		                                maxLengthText: message.get('message.edit.toolong'),
										readOnly: true
		                            }]
								
								}]
							}]
						},{
	                        xtype: 'fieldset',
	                        collapsible: true,
	                        title: dzColorMessage.get('ui.dzcolor.variant'),
	                        autoHeight: true,
	                        items: [{
								layout: 'column',
								items: [{
									columnWidth:.33,
					                layout: 'form',
									items: [{
										id: 'variant',
	                                    name: 'variant',
	                                    fieldLabel: dzColorMessage.get('ui.dzcolor.variant'),
	                                    xtype: 'textfield',
	                                    allowBlank: false,
	                                    anchor: '86%',
										width: '90%',
	                                    blankText: message.get('message.edit.noblank'),
	                                    maxLength: 256
	                                }]
								},{
									columnWidth:.33,
					                layout: 'form',
									items: [{
		                                id: 'dzColorCode',
		                                name: 'dzColorCode',
		                                fieldLabel: dzColorMessage.get('ui.dzcolor.code') + '&nbsp;&nbsp;&nbsp;&nbsp;<img id="dzColorTip" src="../../images/icons/images.png"/>',
		                                xtype: 'textfield',
		                                allowBlank: false,
		                                blankText: message.get('message.edit.noblank'),
		                                emptyText: message.get('message.combo.pleaseselect'),
		                                anchor: '86%',
		                                width: '90%',
		                                maxLength: 64,
										readOnly: true,
										listeners: {
		                                        'render': {
		                                            fn: function(){
		                                                Ext.getCmp('dzColorCode').getEl().on('click', function(){
		                                                	if(!selectYarnId){
		                                                		return;
		                                                	}
		                                                    selectDZColor(selectDZColorCallback, null, null, null, piRecord.data.ctSeasonNumberCode, selectYarnId);
		                                                }, this);
		                                            },
		                                            scope: this
		                                        }
		                                    }
		                            }]
								},{
									columnWidth:.33,
					                layout: 'form',
									items: [{
										id: 'customerColorCode',
	                                    name: 'customerColorCode',
	                                    fieldLabel: dzColorMessage.get('ui.dzcolor.customercolorcode'),
	                                    xtype: 'textfield',
	                                    anchor: '86%',
										width: '90%',
	                                    blankText: message.get('message.edit.noblank'),
	                                    maxLength: 256,
									    readOnly: true
	                                }]
								}]
                    		}]
			        	},{
	                        xtype: 'fieldset',
	                        collapsible: true,
	                        title: dzColorMessage.get('ui.dzcolor.actualweight'),
	                        autoHeight: true,
	                        items: [{
								layout: 'column',
								labelWidth: 65,
								items: [
								{
									columnWidth:.20,
					                layout: 'form',
									items: [{
	                                    xtype: 'numberfield',
	                                    decimalPrecision: 3,
	                                    fieldLabel: referenceMessage.get('ui.reference.weight') + '(Kg)',
	                                    id: 'weight',
	                                    name: 'weight',
	                                    value: piRecord.data.weight,
	                                    anchor: '86%',
	                                    allowBlank: false,
	                                    blankText: message.get('message.edit.noblank'),
	                                    maxLength: 64,
	                                    tabIndex: 1
	                                }]
								},{
									columnWidth:.20,
					                layout: 'form',
									items: [{
	                                    xtype: 'numberfield',
	                                    decimalPrecision: 0,
	                                    fieldLabel: message.get('message.edit.sequence'),
	                                    id: 'sequence',
	                                    name: 'sequence',
	                                    anchor: '86%',
	                                    allowBlank: false,
	                                    blankText: message.get('message.edit.noblank'),
	                                    maxLength: 64,
	                                    tabIndex: 1
	                                }]
								},{
									columnWidth:.20,
					                layout: 'form',
									items: [{
	                                    xtype: 'numberfield',
	                                    decimalPrecision: 2,
	                                    fieldLabel: dzColorMessage.get('ui.dzcolor.percentage') + '(%)',
	                                    id: 'percentage',
	                                    name: 'percentage',
	                                    anchor: '86%',
	                                    allowBlank: false,
	                                    blankText: message.get('message.edit.noblank'),
	                                    maxLength: 64,
	                                    tabIndex: 1
	                                }]
								},{
									columnWidth:.20,
					                layout: 'form',
									items: [{
	                                    xtype: 'numberfield',
	                                    decimalPrecision: 2,
	                                    fieldLabel: dzColorMessage.get('ui.dzcolor.loss') + '(%)',
	                                    id: 'loss',
	                                    name: 'loss',
	                                    anchor: '86%',
	                                    allowBlank: false,
	                                    blankText: message.get('message.edit.noblank'),
	                                    maxLength: 64,
	                                    tabIndex: 1
	                                }]
								},{
									columnWidth:.20,
					                layout: 'form',
									items: [{
	                                    xtype: 'numberfield',
	                                    decimalPrecision: 3,
	                                    fieldLabel: dzColorMessage.get('ui.dzcolor.actualweight') + '(Kg)',
	                                    id: 'actualWeight',
	                                    name: 'actualWeight',
	                                    anchor: '86%',
	                                    allowBlank: false,
	                                    blankText: message.get('message.edit.noblank'),
	                                    maxLength: 64,
	                                    tabIndex: 1,
										listeners: {
		                                        'render': {
		                                            fn: function(){
		                                                Ext.getCmp('actualWeight').getEl().on('click', function(){
		                                                    setActualWeight();
		                                                }, this);
		                                            },
		                                            scope: this
		                                        }
		                                    }
	                                }]
								}]
                    		}]
			        	}],
			
			        buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (pDzColorForm.getForm().isValid()) {
                            	piRecord.data.weight = Ext.getCmp('weight').getValue();
                                pDzColorForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        pDzColorForm.getForm().reset();
                                        Ext.getCmp('weight').setValue(piRecord.data.weight)
										pDzColorListStore.load();
                                        dzColorTipImg = 'noimage.gif';
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							pDzColorForm.getForm().reset();
							dzColorTipImg = 'noimage.gif';
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
							if(input == 'history'){
								if (startPage != null) {
	                                window.location = 'product_identification_history_list.html?startPage=' + startPage;
	                            }else {
	                                window.location = 'product_identification_history_list.html';
	                            }
	                            return;
							}
                            if (startPage != null) {
                                window.location = 'product_identification_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'product_identification_list.html';
                            }
                        }
			        }]
			    });
				
				//pDzColorForm.render('productColorForm');
				
				pDzColorListStore = new Ext.data.GroupingStore({
                    url: '../../servlet/ProductDZColorServlet?action=5&id=' + piRecord.data.id,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'sequence', 'dzColorCode', 'customerColorCode','yarnReference','yarnAccount', 'variant','photo3Name',
					'ctYarnMaterial','percentage',{
							name: 'percentage',
							type: 'float'
						},{
							name: 'loss',
							type: 'float'
						},{
							name: 'actualWeight',
							type: 'float'
						}, 'id']),
                    
                    groupField: 'variant',
                    
                    sortInfo:{
                    	field: 'sequence',
                    	direction: 'ASC'
                    },
                    
                    remoteSort: false
                });
                
                var expander = new Ext.grid.RowExpander({
			        tpl : new Ext.XTemplate(
						'<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photo3Name}" width="150px" onclick="openImageViewer(this.src);"/></p>'
			        )
			    });
                
                var summary = new Ext.grid.GroupSummary();
                pDzColorListGrid = new Ext.grid.GridPanel({
                    title: dzColorMessage.get('ui.dzcolor.listpidzcolor'),
                    store: pDzColorListStore,
                    plugins: [summary, expander],
					stripeRows: true,
                    height: 560,
                    columns: [expander, {
                        header: message.get('message.edit.sequence'),
                        width: 30,
                        dataIndex: 'sequence'
                    },{
                        header: dzColorMessage.get('ui.dzcolor.code'),
                        dataIndex: 'dzColorCode'
                    },{
                        header: dzColorMessage.get('ui.dzcolor.customercolorcode'),
                        dataIndex: 'customerColorCode'
                    }
                    ,{
                        header: yarnMessage.get('ui.yarn.reference'),
                        dataIndex: 'yarnReference'
                    },{
                        header: dzColorMessage.get('ui.dzcolor.variant'),
                        dataIndex: 'variant'
                    },{
                        header: yarnMessage.get('ui.yarn.yarnaccount'),
                        dataIndex: 'yarnAccount'
                    },{
                        header: yarnMessage.get('ui.yarn.material'),
                        dataIndex: 'ctYarnMaterial'
                    },{
                        header: dzColorMessage.get('ui.dzcolor.percentage') + '(%)',
                        align: 'right',
                        dataIndex: 'percentage',
                        renderer: render2D,
                        summaryType:'sum'
                    },{
                        header: dzColorMessage.get('ui.dzcolor.loss') + '(%)',
                        align: 'right',
                        dataIndex: 'loss',
                        renderer: render2D
                    },{
                        header: dzColorMessage.get('ui.dzcolor.actualweight') + '(Kg)',
                        align: 'right',
                        dataIndex: 'actualWeight',
                        renderer: render3D,
                        summaryType:'sum'
                    }
                    /*,{
                        header: message.get('message.list.eidt'),
                        align: 'center',
                        width: 30,
                        dataIndex: 'id',
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        align: 'center',
                        width: 30,
                        dataIndex: 'id',
                        renderer: renderDelete
                    }*/],
                    view: new Ext.grid.GroupingView({
                        forceFit: true,
						hideGroupedColumn: true,
						enableNoGroups:false,
                        groupTextTpl: '&nbsp;&nbsp;<b>' + dzColorMessage.get('ui.dzcolor.variant') + ':</b>&nbsp;&nbsp;{[values.rs[0].data.variant]}'
                    }),
                    loadMask: true,
                    renderTo: 'productColorList'
                });
				
				pDzColorListStore.load();
				
				function renderEdit(value, p, record){
					if(record.id == -1){
						return '';
					}
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                	if(record.id == -1){
						return '';
					}
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
                }
                
                var dzColorTip = new Ext.ToolTip({
			        target: 'dzColorTip',
			        html: '<img id="dzColorTipImg" src="../../_temp/noimage.gif" width="150px">',
			        title: orderMessage.get('ui.order.approvedpic'),
			        autoHide: true,
			        closable: true,
			        draggable:true
			    });
			    
			    dzColorTip.on('show', function(){
			    	if(dzColorTipImg){
			    		document.getElementById('dzColorTipImg').src =  '../../_temp/' + dzColorTipImg;
			    	}
			    });
                
              });
        </script>
</head>
<body>
 <div id="productIdentification">
</div>
<div id="productColorForm">
</div>
<div id="productColorList">
</div>
</body>
</html>